<style scoped>
</style>
<template>
  <file_field :name="name" :model-value="modelValue" @update:modelValue="$emit('update:modelValue',$event)" @change="$emit('change',$event)"
        :config="config_arr.join(',')" :placeholder="placeholder" :is_info="is_info" :max="max"
        v-bind="$attrs"></file_field>
</template>

<script>
import s94 from "s94-js";
import file_field from "./file.vue";

export default {
  name: "file_imgs",
  components: {file_field},
  props: {
    name: String,
    modelValue: [String,Number],
    config: [String,Object],
    placeholder: String,
    is_info: Boolean,
    max: Number,
  },
  emits: ['update:modelValue','change'],
  data(){
    return {
      need_display: true, //定义当modelValue变动时是否需要渲染，用来阻止当前组件变动 modelValue 后重新渲染
      value_arr: [],
      config_arr: [],
      accept: '',
    }
  },
  methods: {
    display(){
      let config_arr = this.config ? s94.to_string(this.config).split(',') : [];
      let all_type = ['jpg','jpeg','png','gif','webp','bmp','ico','svg','tiff'];
      for (let i = 0; i < config_arr.length;) {
        if (!~all_type.indexOf(config_arr[i])) {
          config_arr.splice(i,1)
        }else {
          i++;
        }
      }
      if (!config_arr.length) config_arr = all_type;
      this.config_arr = config_arr;
    }
  },
  watch: {
    config(v){
      this.display();
    },
  },
  computed: {},
  mounted() {
    this.display();
  }
}
</script>